<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0px;
            padding: 0px;
            list-style: none;
        }
        div{
            width: 400px;
            margin:0px auto;
            position: relative;
            background:lime;
        }
        img:nth-of-type(1){
            width: 400px;
        }
        img:nth-of-type(2){
            position: absolute;
            left: 38%;
            top: 48%;
            /* translate如果移动是百分比，参照物是自身 */
            /* transform: translate(-50%,-50%); */
            margin-top: -80px;
            margin-left: -75px;
            width: 250px;   
        }
    </style>
</head>
<body>
   <div>
        <img src="1.jpg" alt="">
        <img src="2.png" alt="" id="row">
   </div>
   <script>
        //  获取标签
       var row=document.getElementById('row');
       var n=0;
       var timer;
    //    绑定点击事件
      row.onclick=function(){
        clearInterval(timer)
        n=0;
        row.style.transform=`rotate(0deg)`;
        timer=setInterval(function(){
                // 产生随机数
                var a=parseInt(Math.random()*8)
                m=360*5+a*45;
                // 常量和变量拼接  `${变量}`
                n=n+45;
                if(n>=m){
                    console.log(1)
                    clearInterval(timer);
                }else{
                    row.style.transform=`rotate(${n}deg)`;
                } 
        },50)
      }
   </script>
</body>
</html>